{extend name="layout/tpl" /}

{block name="title"}新闻分类列表{/block}
{block name="css"}
{__block__}
<style type="text/css">
    .normal{
        color: #1d943b;
    }
    .delete{
        color: #942a25;
    }
    .hidden{
        color: #8D8D8D;
    }
    .operation a{
        color: blue;
    }
</style>
{/block}
{block name="content"}
<button class="layui-btn layui-btn-lg layui-parent-btn" style="margin:15px 0 0 5px;">分类添加</button>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>分类列表</legend>
</fieldset>
<table class="layui-hide" id="categorylist" lay-filter="demo"></table>
<div id="page"></div>
<script type="text/html" id="bar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="delete">删除</a>
</script>
<script type="text/html" id="tpl_moban">
    {{#  if(d.status == '1'){  }}
    <span class="normal">显示</span>
    {{#  } else if(d.status == '2'){  }}
    <span class="hidden">隐藏</span>
    {{#  } else {  }}
    <span class="delete">删除</span>
    {{#  } }}
</script>
{/block}

{block name="footerjs"}
<script>
    layui.use(['laypage','table'], function () {
        var laypage = layui.laypage //分页
            ,table = layui.table //表格
            ,layer = layui.layer
            ,$ = layui.jquery
        ;
        //执行一个 table 实例
        table.render({
            elem: '#categorylist'
            ,url: "{:url('admin.category.index')}" //数据接口
            ,page: true //开启分页
            ,cols: [[ //表头
                {field: 'id', title: '序号', width:80,fixed: 'left'}
                ,{field: 'title', title: '名称'}
                ,{field: 'status', title: '状态', templet: '#tpl_moban'}
                ,{fixed: 'right',title:'操作', align:'center', toolbar: '#bar'}
            ]]
        });
        //监听工具条
        table.on('tool(demo)', function(obj){
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'edit'){
                layer.open({
                    type: 2,
                    title: '编辑',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['420px', '270px'],
                    content: "{:url('admin.category.edit')}?id="+data.id //iframe的url
                });
            }
            if(layEvent === 'delete'){
                var index;
                layer.confirm('确定删除？', function(){
                    $.ajax({
                        type: 'post',
                        url: "{:url('admin.category.delete')}",
                        data:{id:data.id},
                        beforeSend: function () {
                            index = layer.load(1, {
                                shade: [0.1,'#fff'] //0.1透明度的白色背景
                            });
                        },
                        success: function () {
                            layer.close(index)
                            layer.msg("成功");
                            setTimeout(function () {
                                window.location.reload();
                            }, 500)
                        }
                    })
                });
            }
        });
        $(".layui-parent-btn").click(function () {
            layer.open({
                type: 2,
                title: '分类添加',
                shadeClose: true,
                shade: 0.8,
                maxmin: false,
                area: ['420px','330px'],
                content: "{:url('admin.category.add')}" //iframe的url
            });
        });
    })
</script>
{/block}